<template>
  <flight-menu :left="false">
    <template v-slot:header>
      <div class="row row--column">
        <div
          class="row f-menu--title"
          style="align-self: center; margin-right: 0; margin-bottom: 8px"
        >
          {{ title }}
        </div>
        <div class="row" style="margin: 0 auto">
          <button
            :class="{ 'f-tab entry': true, 'f-tab--active': entryActive }"
            @click="toggleEntry"
          >
            入境
          </button>
          <button
            :class="{ 'f-tab exit': true, 'f-tab--active': exitActive }"
            @click="toggleExit"
          >
            出境
          </button>
        </div>
      </div>
    </template>
    <template v-slot:default>
      <div class="f-list f-list--title__wrapper">
        <div class="f-list--title">航班号</div>
        <div class="f-list--title">出发地</div>
        <div class="f-list--title">目的地</div>
        <div class="f-list--title">抵离时间</div>
        <div class="f-list--title">类型</div>
      </div>
      <div ref="list" class="f-list">
        <list-item
          v-for="(d, i) in detailArray"
          :key="'item-' + i"
          :background-class="i % 2 !== 0"
          :flight-number="d.flightNumber"
          :departure="d.departure"
          :destination="d.destination"
          :arrival-time="d.arrivalTime"
          :type="d.type"
        ></list-item>
      </div>
    </template>
  </flight-menu>
</template>

<script>
import FlightMenu from '../FlightMenu.vue';
import ListItem from '../ListItem.ts';
import { useCheckboxInjector } from '../../composables/useChecbox.ts';
import { addPrefixZero } from '../../helpers.ts';
import { useHttp } from '../../composables/useHttp.ts';
export default {
  name: 'SecondRight',
  components: {
    FlightMenu,
    ListItem,
  },
  props: {
    timerInterval: {
      type: Number,
      default: 15000,
    },
  },
  setup() {
    const {
      state,
      mapState,
      register,
      unregister,
      computedAirport,
    } = useCheckboxInjector();
    return {
      state,
      mapState,
      register,
      unregister,
      computedAirport,
    };
  },
  data() {
    return {
      title: '各国及地区航班列表',
      prefixTitle: '',
      detailArray: [],
      entryActive: true,
      exitActive: true,
      scrollTimer: 0,
    };
  },
  beforeUnmount() {
    this.unregister(this.getAirlineDetail);
    this.clearTimer();
    window.removeEventListener('resize', this.autoScrollBar, false);
  },
  mounted() {
    if (this.$route.query) {
      this.prefixTitle = this.$route.query['continental'];
      this.title = this.prefixTitle + this.title;
    }
    window.addEventListener('resize', this.autoScrollBar, false);
    this.register(this.getAirlineDetail);
    this.getAirlineDetail();
    this.autoScrollBar();
  },
  computed: {
    crbz() {
      if (this.exitActive && this.entryActive) return null;
      if (this.exitActive) return 1;
      if (this.entryActive) return 2;
      return undefined;
    },
  },
  watch: {
    crbz() {
      this.getAirlineDetail();
    },
    ['mapState.currentNation'](newVal, oldVal) {
      this.getAirlineDetail();
    },
  },
  methods: {
    clearTimer() {
      const list = this.$refs['list'];
      if (list) list.scrollTo(0, 0);
      clearInterval(this.scrollTimer);
      this.scrollTimer = 0;
    },
    autoScrollBar() {
      const list = this.$refs['list'];
      if (!list) return;
      this.clearTimer();
      let lastTop = 0,
        rect,
        height,
        top;

      this.scrollTimer = setInterval(() => {
        rect = list.getBoundingClientRect();
        height = rect.height;
        top = rect.height + list.scrollTop;
        if (lastTop === top) {
          top = 0;
        }
        list.scrollTo(0, top);
        lastTop = top;
      }, this.timerInterval);
    },
    getAirlineDetail() {
      let params = {};
      if (typeof this.computedAirport === 'undefined' || this.crbz === void 0) {
        this.detailArray = [];
        return;
      }
      if (this.crbz !== null) {
        params['crbz'] = this.crbz;
      }
      return this.$http
        .get('/airlinedetail', {
          continental: this.prefixTitle,
          airport: this.computedAirport,
          nation: this.mapState.currentNation || '',
          ...params,
        })
        .then((result) => {
          if (result && result.status && result.status === 200) {
            this.detailArray = result.data.filter((d) => {
              if (
                (d.type === 'PAX' && this.state.airbusActive) ||
                (d.type !== 'PAX' && this.state.cargoActive)
              ) {
                return true;
              }
              return false;
            });

            this.autoScrollBar();
          }
        })
        .catch((err) => {
          console.error(err);
          this.detailArray = [];
        });
    },
    toggleEntry() {
      this.entryActive = !this.entryActive;
    },
    toggleExit() {
      this.exitActive = !this.exitActive;
    },
  },
};
</script>
